<template>
  <div class="t-buy clearfix" style="">
    <div class="stock-search1" avalonctrl="vmStockSearch">
      <!-- <search></search>     -->

    </div>
    <div class="trade-stock ">
      <div>
        <div class="stock-name clearfix">
          <span class="fl col-1">{{codeData.name}} ({{codeData.code}})<i style="display: none;"></i></span>
        </div>
        <div class="stock-price clearfix">
          <div class="fl col-1 txt-up">
            <p style="width:80%" class="fl">
              <span :class="{down_green:codeData.up_value<0}" class="txt-s54">{{codeData.current_price}}</span>
              <span class="arrow"></span>              
            </p>
            <p style="width:20%" class="txt-s18 fr margint10">
              <span :class="{down_green:codeData.up_value<0}" class="mr20 block">{{codeData.up_value}}</span>
              <span :class="{down_green:codeData.up_value<0}" class="block">{{codeData.up_ratio}}</span>
            </p>
            <div class="clearfix"></div>
            <div class="stock-info" style="width: 280px; font-size: 13px;">
              <div class="txt-lesser">
                <table>
                  <tbody>
                    <tr>
                      <td style="width: 70px;">今 开</td>
                      <td style="width: 70px;">最 高</td>
                      <!-- <td>涨停价</td> -->
                      <td class="txt-r" style="width: 100px;">成交量</td>
                    </tr>
                    <tr>
                      <td>{{codeData.today_begin_price}}</td>
                      <td>{{codeData.high}}</td>
                      <!-- <td>{{codeData.today_begin_price}}</td> -->
                      <td class="txt-r">{{codeData.volume}}</td>
                    </tr>
                    <tr>
                      <td>振 幅</td>
                      <td>最 低</td>
                      <!-- <td>跌停价</td> -->
                      <td class="txt-r">成交额</td>
                    </tr>
                    <tr>
                      <td>{{codeData.zhenfu}}</td>
                      <td>{{codeData.low}}</td>
                      <!-- <td>{{codeData.volume}}</td> -->
                      <td class="txt-r" width="30%">{{codeData.turnover}}元</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>          
        </div>
        <div class="stock-line">
          <div class="type-wrap">
            <ul class="clearfix">
              <li @click="changeK(index)" v-for="(item,index) in typeK" :key="index" :class="{'curr':index == typeKIndex}">
                {{item}}
              </li>
            </ul>
          </div>
          <div class="stock-chart">
            <div class="wrap clearfix">
              <time-k v-show="typeKIndex == 0"></time-k>
              <day-k v-show="typeKIndex == 1"></day-k>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="trade-init" avalonctrl="vmTrade">
      <div class="row1">
        <h3 class="clearfix">
          <span class="fl"><label>创建信用金额:</label><span style="margin-left:10px;" class="txt-up txt-s20">{{clMoney}}</span>元</span>
        </h3>
        <div style="margin-bottom:10px;">
          <span class="fl"><label>输入信用金额:</label></span>
          <span>
            <input style="width:93px;text-align:center;margin-left:10px;" id="expmoney" name="expmoney" autocomplete="off" v-model="clMoney" class="ui-input1"> 元
            <b style="color:red;  margin-left:20px;"></b>
          </span>
        </div>
        <div class="f-wrap">
          <div class="wrap clearfix">
            <a :class="{'curr':index==clIndex}" @click="changeTab(index)" v-for="(item,index) in clTab" :key="index" class="1">{{item}}</a>
          </div>
        </div>
      </div>

      <div class="row1">
        <h3 class="clearfix">
          <span class="fl">
            <label>策略匹配倍数:</label>
            <!-- <span style="margin-left:10px;" class="txt-up txt-s20">{{clMoney}}</span>股
            价值<span style="margin-left:10px;" class="txt-up txt-s20">{{clMoney}}</span>元 -->
          </span>
        </h3>
        <div style="margin-bottom:10px;">         
        </div>
        <div class="f-wrap">
          <div class="wrap clearfix">
            <a :class="{'curr':index==bsIndex}" @click="changebs(index)" v-for="(item,index) in bs" :key="index" class="1">{{item}}倍</a>
          </div>
        </div>
      </div>

      <div class="row2">
        <div class="label-wrap clearfix">
          <label>触发止损</label>
          <div class="fl desc">
            <span class="txt-up txt-s20"> <input style="width:93px;text-align:center;margin-left:10px;" id="expmoney" name="expmoney" v-model="minLess" autocomplete="off" class="ui-input1"></span> 元 &nbsp; &nbsp;
            <span @click="less(1)" class="l1">-</span>
            <span class="down_green">跌幅约：{{(codeData.current_price - minLess)/codeData.current_price | toPercentage}}</span>
            <span @click="add(1)" class="l1">+</span>
          </div>
          <div style="clear:both"></div>
          <label>触发止盈</label>
          <div class="fl desc">
            <span class="txt-up txt-s20"> <input v-model="minAdd" style="width:93px;text-align:center;margin-left:10px;" id="expmoney" name="expmoney" autocomplete="off" class="ui-input1"></span> 元 &nbsp; &nbsp;
            <span @click="less(2)" class="l1">-</span>
            <span>涨幅约：{{(minAdd-codeData.current_price)/codeData.current_price | toPercentage}}</span>
            <span @click="add(2)" class="l1">+</span>
          </div>
        </div>
      </div>
      <div class="row3">
        <div class="label-wrap clearfix">
          <label>追加模式</label>
          <select @change="changeZj" v-model="zj" style="margin-top:3px;border: 1px solid #DBDBDB;">
            <option value="1">手动追加</option>
            <option value="2" selected="selected">自动追加</option>
          </select>
        </div>
        <div class="label-wrap clearfix">
          <label>递延模式</label>
          <select @change="changeDy" v-model="dy" style="margin-top:3px;border: 1px solid #DBDBDB;">
            <option value="1">不递延</option>
            <option value="2" selected="selected">递延</option>
          </select>
        </div>
        <div class="label-wrap clearfix">
          <label>建仓费</label>
          <!--ms-if-->
          <div class="fl desc">
            <span class="txt-up txt-s20">{{cangfei}}</span>元
          </div>
        </div>
        <div class="label-wrap clearfix">
          <label>递延费</label>
          <!--ms-if-->
          <!--ms-if-->
          <div class="fl desc">
            <span class="txt-up txt-s20">{{diyanfei}}</span><i class="dy-tip">元</i>
          </div>
        </div>
        <div class="label-wrap clearfix">
          <label>递延条件</label>
          <div class="fl desc">
            若未开启自动递延，到期日 14:50 将卖出股票
          </div>
        </div>
      </div>
      <div class="row3">        
        <div class="label-wrap clearfix">
          <label>共计费用</label>
          <div class="fl desc up_red">
            {{all}}元
          </div>
        </div>
      </div>
      <div class="row4">
        <p class="pt20">
          <button @click="mb" type="button" class="btn btn-disabled" style="width: 280px; height: 40px; border-radius: 5px; margin: 20px auto 20px auto;cursor:pointer;"> 
            购买
          </button>
        </p>
        <p>
        </p>
        <div class="checkbox checkbox-agree1">
          <input type="checkbox" id="agree" name="agree[]" :checked="checked">
          <label @click="changeChecked" for="agree">
            我已阅读并同意以下协议
          </label>
        </div>
        <router-link tag="a" to="/createXy" target="_blank" class="txt-s12">《支付服务协议》</router-link>
        <br>
      </div>
    </div>
  </div>
</template>

<script>
import Search from '@/components/Search'

import Axios from '@/common/js/Axios'
import TimeK from './TimeK'
import DayK from './DayK'
import { Dialog } from "vant";
import { Loading} from 'element-ui';
export default {
  filters: {
    //转成百分数
    toPercentage(value) {
      let str = Number(value * 100).toFixed(2);
      str += "%";
      return str;
    }
  },
  mounted(){
    this.getCodeMsg();
    this.getBs();
    this.getdy();
  },
  components:{
    TimeK,
    DayK,
    Search
  },
  data(){
    return {
      all:"",
      //递延模式(1=不递延,2=递延)
      dy:2,
      //追加模式(1=手动追击,2=自动追加)
      zj:2,
      //同意协议
      checked:true,
      //股票倍数
      bs:[],
      bsIndex:0,
      //止损价
      minLess: 0,
      //止盈价
      minAdd: 0,
      //k线类型
      typeK:["分时图","K线图"],
      //K线类型下标      
      typeKIndex:0,      
      code : localStorage.getItem("bugCode"),
      codeData:{},
      //策略金额
      clMoney:1000,
      //策略金额tab
      clTab:[1000, 5000, 10000, 20000, 30000, 50000, 80000, 100000],
      //策略选中的index
      clIndex:0,
      cangfei:0,
      diyanfei:0,
      token:localStorage.getItem("Authorization")
    }
  },
  watch:{
    //输入金额发生改变
    clMoney(v){
      let state = true;
      for(let i=0;i<this.clTab.length;i++){
        if(v == this.clTab[i]){
          state = false;
        }
      }
      if(state){
        this.clIndex = -1;
      }
      this.getdy();      
    }
  },
  methods:{
    less(num){
      if(num == 1){
        this.minLess -= 0.01;
        this.minLess = parseInt(this.minLess);
      }else{
        this.minAdd -= 0.01;
        this.minAdd = parseInt(this.minAdd);
      }
    },
    add(num){
      if(num == 1){
        this.minLess = parseInt(this.minLess)+1;        
      }else{
        this.minAdd = parseInt(this.minAdd)+1;
      }
    },
    //获得倍数
    getBs(){
      Axios.getAxios("/api/multiple", {}).then(
        res => {          
          this.bs = res.data.data;  
          this.getdy();
        },
        err => {          
        }
      );
    },
    //修改追加模式
    changeZj(){
      console.log(this.zj);
    },
    //修改递延模式
    changeDy(){
      console.log(this.dy);
    },
    //同意协议
    changeChecked(){
      this.checked = !this.checked;      
    },
    //切换倍数
    changebs(index){
      this.bsIndex = index;
      this.getdy();
    },
    //获取递延,费，建仓费
    getdy(){
      Axios.postAxios("/api/tactics/procedure",{
        xingyongjin:this.clMoney,
        multiple:this.bs[this.bsIndex],
        code:this.code
      }).then(
        res => {          
          console.log(res)   
          this.minLess = res.data.data.min_min_price;
          this.cangfei = res.data.data.cangfei     
          this.diyanfei = res.data.data.diyanfei  
          this.minAdd = res.data.data.max_max_price
          this.all = parseFloat(this.clMoney)+parseFloat(this.cangfei)
        },
        err => {          
        }
      );
    },
    //切换策略金额
    changeTab(index){
      this.clIndex = index;
      this.clMoney = this.clTab[index];    
    },
    //切换K线
    changeK(index){
      this.typeKIndex = index;
    },
    //购买股票
    async mb(){  
      let ok = true;
      if(!this.checked){
        this.$message.error("请阅读并同意《支付服务协议》");
        return false;
      }
      await this.$confirm('确认创建此策略吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消购买'
        });        
        ok = false;  
      });
      if(!ok){
        return false;
      }
      Axios.postAxios("/api/tactics",{
          code: this.code,
          xingyongjin: this.clMoney,
          multiple:this.bs[this.bsIndex],
          max_price: this.minAdd,
          min_price: this.minLess,         
          is_add: this.zj,
          is_sell: this.dy,
          is_analog: 0,
          uuid : Math.random().toString(36).substr(2)
      },{
          Authorization: "Bearer " + this.token
      }).then(res=>{
        console.log(res);
        if(!res.data.status){
          this.$message.error(res.data.msg);
        }else{
          this.$message.success(res.data.msg);
        }
      },err=>{
        this.$message.error(err.data.msg)
        console.log(err);
      }
      );
    },
    //获取股票信息
    getCodeMsg(){
      Axios.getAxios("/api/stock/realTimeInfo/"+this.code, {}).then(
        res => {          
          this.codeData = res.data;    
          this.minAdd = parseInt(this.codeData.current_price)+1;      
        },
        err => {          
        }
      );
    }
  }
};
</script>

<style lang="stylus" scoped>
.trade-page .trade-stock .stock-line .type-wrap{
  padding-bottom:0
}
.l1{
  border:1px solid #ccc;
      border: 1px solid #ccc;
    width: 20px;
    text-align: center;
    line-height: 19px;
    display: block;
    display: inline-block;
    cursor:pointer;
}
</style>

